<template>
  <div class="SampleDetection">
    <el-dialog
      v-if="load"
      title="查看检测结果"
      v-model="visible"
      align-center
      width="800px"
      @close="handleClose"
      :z-index="2000"
    >
      <div class="">
        <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          @tab-change="changeTab"
        >
          <el-tab-pane
            v-for="(item, index) in listData"
            :key="index"
            :label="item.goods_sku"
            :name="index"
          >
            <el-card class="box-card mb-4">
              <template #header>
                <div class="card-header">
                  <span>检测问题点</span>
                </div>
              </template>
              <div class="w-full h-20" v-html="item.problem_points"></div>
            </el-card>
            <el-card class="box-card mb-4">
              <template #header>
                <div class="card-header">
                  <span>重点检测事项</span>
                </div>
              </template>
              <div
                class="flex flex-col items"
                v-if="item.inspection_items && item.inspection_items.length"
              >
                <div
                  class="flex border-b border-l"
                  v-for="(item, index) in item.inspection_items"
                  :key="index"
                >
                  <div class="w-40 py-2 border-r text-center line1">
                    {{ item.item_name }}
                  </div>
                  <div class="flex-auto border-r pl-3 py-2 line1">
                    {{ item.item_content }}
                  </div>
                </div>
              </div>
              <div class="text-gray-400" v-else>暂无重点检测事项</div>
            </el-card>
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>检测结果</span>
                </div>
              </template>
              <div class="flex flex-col justify-center items-center">
                <div class="flex items-center" v-if="item.detection_status == 0">
                  <span>待检测</span>
                </div>
                <div class="flex items-center" v-if="item.detection_status == 1">
                  <svg-icon
                    class="mr-1 inline-block"
                    icon-class="state_finish_enable"
                  /><span>通过</span>
                </div>
                <div class="flex items-center" v-if="item.detection_status == 2">
                  <svg-icon class="mr-1 inline-block" icon-class="hint_cover" /><span
                    >异常</span
                  >
                </div>
                <div class="text-gray-400">SKU样品检测结果</div>
                <div v-if="item.detection_report_url">
                  <span>{{ item.detection_report_url }}</span>
                  <el-button
                    type="primary"
                    link
                    @click="downloadLink(item.detection_report_url)"
                    >下载</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
      <template #footer>
        <div class="flex justify-center py-2">
          <el-button @click="close">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="SampleDetection">
import { downloadFile } from "@/utils/downloadFile.js";
import { ref } from "vue";
const activeName = ref(0);
const listData = ref([]);
const load = ref(false);
const visible = ref(false);

const emit = defineEmits(["close"]);
// 打开弹窗
const open = async (item) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  listData.value = [item];
  visible.value = true;
};
// 关闭弹窗
const close = () => {
  visible.value = false;
};
const changeTab = (tab) => {
  activeName.value = tab;
};
const handleClose = () => {
  emit("close");
};
const downloadLink = (link) => {
  downloadFile(link, `样品检测报告`);
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
.SampleDetection {
  .items {
    &:first-child {
      border-top: 1px solid var(--el-card-border-color);
    }
  }

  :deep(.el-card__header) {
    border-bottom: 1px solid var(--el-card-border-color);
  }
}
</style>
